<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>饼图</title>
    <link rel="stylesheet" href="https://os.alipayobjects.com/basement/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
    <!--如果不需要jquery ajax 则可以不引入-->
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
    <!-- 引入 G2 脚本 --><script src="https://a.alipayobjects.com/g/datavis/g2/2.1.3/index.js"></script>
    <script>
      G2.Global.setTheme('dark');
    </script>
  </head>
  <body>
    <div id="c1"></div>
    <script>
      var data = [
        {name: 'Microsoft Internet Explorer', value: 56.33 },
        {name: 'Chrome', value: 24.03},
        {name: 'Firefox', value: 10.38},
        {name: 'Safari',  value: 4.77},
        {name: 'Opera', value: 0.91},
        {name: 'Proprietary or Undetectable', value: 0.2}
      ];
      var Stat = G2.Stat;
      var chart = new G2.Chart({
        id: 'c1',
        width: 1000,
        height: 500
      });
      chart.source(data);
      // 重要：绘制饼图时，必须声明 theta 坐标系
      chart.coord('theta', {
        radius: 0.8 // 设置饼图的大小
      });
      chart.legend('name', {
        position: 'bottom'
      });
      chart.tooltip({
        title: null,
        map: {
          value: 'value'
        }
      });
      chart.intervalStack()
        .position(Stat.summary.percent('value'))
        .color('name')
        .label('name*..percent',function(name, percent){
        percent = (percent * 100).toFixed(2) + '%';
        return name + ' ' + percent;
      });
      chart.render();
      // 设置默认选中
      var geom = chart.getGeoms()[0]; // 获取所有的图形
      var items = geom.getData(); // 获取图形对应的数据
      geom.setSelected(items[1]); // 设置选中
    </script>
  </body>
</html>
